import React,{useState} from 'react'
import { Carousel } from 'antd'
import home from './styles/homepage.module.css'
import Navict from '../components/Navict'
import Recommend from '../components/Recommend'
import Booklist from '../components/BookList'
import BottomNavict from '../components/BottomNavict'
import Rank from '../components/Ranking'
import classNames from 'classnames'
import { useNavigate } from 'react-router-dom'
// 1. FC: Functional Component 的缩写，表示这是一个函数组件
// 2. any: 表示这个组件可以接受任意类型的props
// 3. 返回值是一个React元素，表示这个组件需要返回什么内容
// 4. props: 表示组件的属性，在组件中可以通过props访问属性

interface carouselInterface {
    title: string,
    src: string
}

interface godOption {
    title: string,
    src: string,
    url?: string
}

const carouselList: carouselInterface[] = [
    { title: '1', src: 'https://static.zongheng.com/upload/recommend/e4/1e/e41e9b51739f39093e6c6f36d445493b.jpeg' },
    { title: '2', src: 'https://static.zongheng.com/upload/recommend/18/ea/18ea3314f731ce32cb798d2b7438c5c5.jpeg' },
    { title: '3', src: 'https://static.zongheng.com/upload/recommend/dc/44/dc44f9d8acb144f68c1aa5ef56c03489.jpeg' }
]

const godList: godOption[] = [
    {
        title:'大神专区',
        src:'https://revo.zongheng.com/www/2024/images/6f7be65.png'
    },
    {
        title:'排行榜',
        src:'https://revo.zongheng.com/www/2024/images/fe95580.png',
        url:'/ranking'
    },
    {
        title:'书库',
        src:'https://revo.zongheng.com/www/2024/images/b46f50f.png'
    }
]

const bookOption: godOption[] = [
    {
        title:'玄幻',
        src:'/'
    },
    {
        title:'都市',
        src:'/'
    },
    {
        title:'仙侠',
        src:'/'
    },
    {
        title:'游戏',
        src:'/'
    },
    {
        title:'科幻',
        src:'/'
    },
    {
        title:'奇闻轶事',
        src:'/'
    },
    {
        title:'N次元',
        src:'/'
    },
    {
        title:'奇幻',
        src:'/'
    }
]

const userOption: godOption[] = [
    {
        title:'完本专区',
        src:'/'
    },
    {
        title:'帮助中心',
        src:'/'
    }
]

const recomInfo = {
    type: 0,
    title: '热门推荐'
}

const recomInfo1 = {
    type: 1,
    title: '经典完本'
}

const HomePage: React.FC = () => {
    const [state, setState] = useState(0)
    const navigate = useNavigate()
    const onAcitive = (e: any) => {
        setState(e)
    }
    const onPageChange = (item: godOption) => {
        navigate(item?.url || '/')
    }
    return (
        <>
            <Navict />
            <div className={home.car}>
                <Carousel  adaptiveHeight={true} autoplay style={{ width: '100%', height: '100%' }}>
                    {carouselList.map((item, index) => (
                        <img className={home.carImg} key={index} src={item.src} alt={item.title} />
                    ))}
                </Carousel>
            </div>
            <div className={home.book}>
                <div className={home.gold}>
                    <div className={home.center}>
                        <div className={home.god_area}>
                            {
                                godList.map((item, index) => (
                                    <div className={home.god_option} key={index} onClick={() => onPageChange(item)}>
                                        <div className={home.god_icon}>
                                            <img src={item.src} alt="" />
                                        </div>
                                        <div className={classNames({ [home.god_txt1]: index === 0, [home.god_txt2]: index === 1, [home.god_txt3]: index === 2 })}>
                                            {item.title}
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                        <div className={home.option}>
                            {
                                bookOption.map((item,index)=>(
                                    <div key={index} className={home.option_item}>
                                        <div className={home.option_b}>
                                            {item.title}
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                        <div className={home.space}><div></div></div>
                        <div className={home.user_area}>
                            {
                                userOption.map((item,index)=>(
                                    <div key={index} className={home.user_option}>
                                        <div className={home.user_b}>
                                            {item.title}
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
                <div className={home.recommend}>
                    <Recommend recomInfo={ recomInfo } />
                </div>
                <div className={home.newbooks}>
                    <Booklist title="新书推荐" />
                </div>
                <div className={home.essay}>
                    <img src="https://static.zongheng.com/upload/recommend/d6/99/d6992eeb1117d40a431f188bf0d37edb.jpeg" alt="" /> 
                </div>
                <div className={home.finish}>
                    <Recommend recomInfo={ recomInfo1 } />
                </div>
                <div className={home.ranking}>
                    <div className={home.ranking_title}>
                        <div onClick={() => onAcitive(0) } className={classNames({ [home.rank_t_active] : state === 0 })}>全站男生排行<div className={classNames({ [home.active] : state === 0 })}></div></div>
                        <div onClick={() => onAcitive(1) } className={classNames({ [home.rank_t_active] : state === 1 })}>全站女生排行<div className={classNames({ [home.active] : state === 1 })}></div></div>
                        <div onClick={() => onAcitive(2) } className={classNames({ [home.rank_t_active] : state === 2 })}>全站脑洞排行<div className={classNames({ [home.active] : state === 2 })}></div></div>
                    </div>
                    <div className={home.ranking_list}>
                        <Rank type={1} />
                        <Rank type={2} />
                        <Rank type={3} />
                        <Rank type={4} />
                    </div>
                </div>
                <BottomNavict />
            </div>
        </>
    )
}

export default HomePage